<template>
  <div id="app" class="h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 flex flex-col overflow-hidden">
    <!-- 导航栏 -->
    <nav class="flex-shrink-0 z-50 bg-white/80 backdrop-blur-md shadow-lg border-b border-gray-200/50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <!-- Logo -->
          <router-link to="/" class="flex items-center space-x-3 cursor-pointer hover:opacity-80 transition-opacity duration-200" @click="closeMobileMenu">
            <div
              class="w-12 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
              <span class="text-white font-bold text-lg">For4</span>
            </div>
            <h2 class="text-xl font-bold gradient-text">路况分析系统</h2>
          </router-link>

          <!-- 导航菜单 -->
          <div class="hidden md:flex items-center space-x-1">
            <router-link
              to="/"
              class="nav-link px-4 py-2 rounded-lg font-medium transition-all duration-200 hover:bg-blue-50 hover:text-blue-600"
              :class="{ 'bg-blue-100 text-blue-600': $route.path === '/' }">
              首页
            </router-link>
            <router-link
              to="/image-detection"
              class="nav-link px-4 py-2 rounded-lg font-medium transition-all duration-200 hover:bg-blue-50 hover:text-blue-600"
              :class="{ 'bg-blue-100 text-blue-600': $route.path === '/image-detection' }">
              图像检测
            </router-link>
            <router-link
              to="/about"
              class="nav-link px-4 py-2 rounded-lg font-medium transition-all duration-200 hover:bg-blue-50 hover:text-blue-600"
              :class="{ 'bg-blue-100 text-blue-600': $route.path === '/about' }">
              关于我们
            </router-link>
          </div>

          <!-- 移动端菜单按钮 -->
          <div class="md:hidden">
            <button @click="toggleMobileMenu" class="p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4 6h16M4 12h16M4 18h16"></path>
              </svg>
            </button>
          </div>
        </div>

        <!-- 移动端菜单 -->
        <div v-if="mobileMenuOpen" class="md:hidden py-4 border-t border-gray-200">
          <div class="flex flex-col space-y-2">
            <router-link
              to="/"
              @click="closeMobileMenu"
              class="px-4 py-2 rounded-lg font-medium transition-all duration-200 hover:bg-blue-50 hover:text-blue-600"
              :class="{ 'bg-blue-100 text-blue-600': $route.path === '/' }">
              首页
            </router-link>
            <router-link
              to="/image-detection"
              @click="closeMobileMenu"
              class="px-4 py-2 rounded-lg font-medium transition-all duration-200 hover:bg-blue-50 hover:text-blue-600"
              :class="{ 'bg-blue-100 text-blue-600': $route.path === '/image-detection' }">
              图像检测
            </router-link>
            <router-link
              to="/about"
              @click="closeMobileMenu"
              class="px-4 py-2 rounded-lg font-medium transition-all duration-200 hover:bg-blue-50 hover:text-blue-600"
              :class="{ 'bg-blue-100 text-blue-600': $route.path === '/about' }">
              关于我们
            </router-link>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主内容区域 -->
    <main class="for4-main-wrapper flex-1 overflow-y-auto">
      <router-view />
    </main>
  </div>
</template>

<script setup>
import { ref } from "vue";

const mobileMenuOpen = ref(false);

const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value;
};

const closeMobileMenu = () => {
  mobileMenuOpen.value = false;
};
</script>
<style lang="scss">
.for4-main-wrapper {
  height: calc(100vh - 64px);
  position: relative;
}
</style>
